<template>
  <div>
    <div>
        <h2>又拍云拖拽上传</h2>
				
		<Avatar :src="src" :width="150" fit="fill"></Avatar>
	</div>
    <div>
        <button @click="yi">移动图片</button>
        <br>
        <button @click="shan">删除图片</button>
    </div>
        
    <br>
    <div @change="upload_upyun" class="upload">拖拽上传</div>



  </div>
</template>

<script>
export default {
  data() {
    return {
      src:'',

  
    };
  },
  //监听属性
  watch: {},
  //计算属性
  computed: {},
  mounted() {
    // 注册拖拽容器
    let upload = document.querySelector(".upload");
    //声明监听事件
    upload.addEventListener("dragenter", this.onDrag, false);
    upload.addEventListener("dragover", this.onDrag, false);
    upload.addEventListener("drop", this.onDrop, false);
  },
  //自定义方法
  methods: {

          //定义删除又拍云方法
      shan:function(){
        this.axios.get('http://127.0.0.1:8000/deleteyun/').then(res=>{
            alert(res.data.message)
       
        });
      
      },

      //定义移动又拍云方法
      yi:function(){
        this.axios.get('http://127.0.0.1:8000/yidongyun/').then(res=>{
            alert('移动成功')
       
        });
      


      },


    onDrag(e) {
      e.stopPropagation();
      e.preventDefault();
    },
    onDrop(e) {
      e.stopPropagation();
      e.preventDefault();
      //调用自定义上传方法
      this.upload_upyun(e.dataTransfer.files);
    },
    //上传又拍云
    upload_upyun: function(files) {
      //获取文件对象
      let file = files[0];

      //声明参数
      let param = new FormData();
      param.append("file", file);

      //声明头部信息
      const config = {
        headers: { "Content-Type": "multipart/form-data" }
      };

      this.axios.post("http://localhost:8000/ksyun/", param, config).then(res=>{

          localStorage.setItem('filename', res.data.filename)
        
          console.log(res);
        //   let filename = JSON.parse(res.data.filename).filename
          let filename = res.data.filename
        //   this.filename = filename
          this.src = 'http://1907b.test.upcdn.net/' + filename;
        //   console.log(file.name)
          
        })
    }
  }
};
</script>

<style>
.upload {
  margin: 100px auto;
  width: 300px;
  height: 200px;
  border: 2px dashed #f00;
}
</style>